<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="pd-total">
      <el-breadcrumb-item :to="{ path: '/project' }"
        >项目管理</el-breadcrumb-item
      >
      <el-breadcrumb-item
        v-if="$route.query.condition === 0"
        :to="{ path: `/project?isclose1=true` }"
        >售前项目</el-breadcrumb-item
      >
      <el-breadcrumb-item
        v-if="$route.query.condition === 1"
        :to="{ name: 'project',params: { pn1: this.pn4} }"
        >正式项目</el-breadcrumb-item
      >
      <el-breadcrumb-item
        v-if="$route.query.condition === 2"
        :to="{ path: `/project?isclose2=true` }"
        >已关闭项目</el-breadcrumb-item
      >
      <el-breadcrumb-item> 查看日报</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="hander-row">
      <div style="width: 75%; text-align: center">
        <h3>{{ projectName }}</h3>
      </div>
      <div>
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="handleClickdate"
        >
        </el-date-picker>
        <el-button type="primary" @click="handleClickquery">查询</el-button>
      </div>
    </div>
    <!-- 全部日报表格 start -->
    <div class="fulfill">
      <el-table
        border
        :data="dataList.records"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#F9F9F9' }"
        style="width: 100%"
      >
        <el-table-column
          prop="deptName"
          align="center"
          label="职能组"
        ></el-table-column>
        <el-table-column
          prop="username"
          align="center"
          label="姓名"
        ></el-table-column>
        <el-table-column
          value-format="yyyy-MM-dd"
          prop="taskDate"
          align="center"
          label="任务日期"
        ></el-table-column>
        <!-- <el-table-column
          value-format="yyyy-MM-dd"
          prop="taskDate"
          align="center"
          label="计划日期"
          v-if="typeId == 2"
        ></el-table-column> -->
        <el-table-column
          prop="projectName"
          align="center"
          label="项目名称"
        ></el-table-column>
        <el-table-column
          prop="time"
          align="center"
          label="工时（天）"
        ></el-table-column>
        <el-table-column
          prop="content"
          align="center"
          label="工作内容"
        ></el-table-column>
        <el-table-column
          value-format="yyyy-MM-dd"
          prop="createTime"
          align="center"
          label="上报时间"
        >
          <template slot-scope="scope">{{
            scope.row.createTime | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column
          prop="isConfirm"
          align="center"
          label="状态"
          :formatter="isConfirmFalg"
        ></el-table-column>
        <el-table-column
          prop="confirmName"
          align="center"
          label="确认人"
        ></el-table-column>
        <!-- <el-table-column
          prop="id"
          align="center"
          label="操作"
          fixed="right"
          width="250"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isConfirm == 0 && flag"
              type="info"
              plain
              size="mini"
              @click="editClick(scope.row)"
              >修改</el-button
            >
            <el-button
              v-if="scope.row.isConfirm == 0 && flag"
              type="danger"
              plain
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >

            <el-button
              v-if="scope.row.permission == 1 && scope.row.isConfirm == 0"
              type="success"
              size="mini"
              plain="plain"
              @click="handleEdit(scope.row)"
              title="确认"
              >确认</el-button
            >
            <el-button
              v-if="
                scope.row.confirmName != null &&
                scope.row.cancelPermission === 1 &&
                scope.row.isConfirm == 1
              "
              size="mini"
              type="warning"
              plain
              @click="handleCancelClick(scope.row)"
              >取消确认</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        style="margin-top: 10px; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataList.total"
      ></el-pagination>
    </div>
    <!-- 全部日报表格 end -->
  </div>
</template>
<script>
import { postselectDailyByProjectId } from "@/service/Api.js";
export default {
  data() {
    return {
      dateValue: "",
      projectName: this.$route.query.projectName,
      pn: 1,
      ps: 10,
      projectId: this.$route.query.projectId,
      pn4: this.$route.query.pn,
      startDate: "",
      endDate: "",
      dataList: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //选择日期
    handleClickdate(value) {
      console.log("选择日期", value);
      // if (value) {
      this.startDate = value ? value[0] : "";
      this.endDate = value ? value[1] : "";
      // }
    },

    // 点击查询
    handleClickquery() {
      this.getData();
    },
    // 表格数据
    getData() {
      let data = {
        pn: this.pn,
        ps: this.ps,
        projectId: this.projectId,
        startDate: this.startDate,
        endDate: this.endDate,
      };
      postselectDailyByProjectId(data).then((res) => {
        if (res.code === 0) {
          this.dataList = res.data;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.ps = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pn = val;
      this.getData();
    },
    // 表格自定义数据
    isConfirmFalg(row, column) {
      return row.isConfirm == 0 ? "待确认" : "已确认";
    },
  },
};
</script>

<style scoped>
.hander-row {
  display: flex;
  justify-content: space-around;
  padding: 20px 0px;
}

.fulfill {
  width: 100%;
}
</style>